<template>
    <div class="demo-pagination-block">
        <el-pagination
      v-model:currentPage="currentPage3"
      v-model:page-size="pageSize3"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="prev, jumper, next, "
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
</template>
<script lang="ts" setup>

// import axios from "axios"
import { ref } from 'vue'

const currentPage1 = ref(5)
const currentPage2 = ref(5)
const currentPage3 = ref(4)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}



// const handleUserList = () => {
//       axios.get('/user/list').then(res=>{
//         console.log(res,'res')
//         this.userList = res.data.data.list[0].records;
//       }).catch(error=>{
//         console.log(error)
//       })
//     }

</script>
<style scoped>
/* .demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
} */
</style>
